<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
        <script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
        <script th:src="@{/layui/layui.js}"></script>
	</head>
	<style>
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF;
    }
    .layui-table-page {
            text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
	</style>
<body>
<!--数据表格样式及附件-->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <a onclick="javascript:history.back(-1);">
            <i class="layui-icon" style="font-size: 20px;padding-right: 10px;cursor: pointer;">&#xe65c;</i>
        </a>
    </div>

</script>
<!--表内功能-->
    <script id="bar" type="text/html">
        <a id="upd" class="layui-btn layui-btn-xs" lay-event="aduit">
            <i class="layui-icon">&#xe606;</i>审批
        </a>
	</script>

<!--表格-->
<div class="utable">
    <table class="layui-table" id="demo" lay-filter="demo"></table>
</div>


</body>
<script type="text/javascript" th:inline="none">
    layui.use('table', function () {
        var table = layui.table;

        //方法渲染
        table.render({
            elem: '#demo'
            ,id: 'tab'
            ,height: 540
            ,width: 1250
            ,url: '/aduitcheck/listdata' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'checkingid', title: '编号', sort: true}
                ,{field: 'emp_Name', title: '员工姓名'}
                ,{field: 'punchtime', title: '未打卡时间'}
                ,{field: 'cause', title: '原因说明'}
                ,{fixed: 'right', title:'操作', toolbar: '#bar'}
            ]]
        });


        //监听行工具事件
        table.on('tool(demo)', function (obj) {
            var data = obj.data;//获取数据
            if (obj.event == 'aduit') {//修改

                layer.open({
                    type: 2,
                    title: '未打卡审批',
                    maxmin: true, //开启最大化最小化a按钮
                    area: ['430px', '320px'],
                    content: ['/aduitcheck/toaduit?id='+data.checkingid]//这是链接你的页面地址 url
                });

            }
        })


    });
</script>
</html>